<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>在组件上使用v-model指令</title>
        <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
        <script src="/javascripts/vue@3.0.11.js" ></script>
    </head>
    <body>

        <div class="container border" style="margin: 15px 0" id="first">
            <!-- v-bind:value = "message"  v-on:input = "" -->
            <input type="text" :value="message" @input="handler">
            <p>{{message}}</p>
        </div>

        <script>
            const firstApp = Vue.createApp({
                data(){
                    return { message: '' }
                },
                methods: {
                    handler(e){
                        this.message = e.target.value ;
                    }
                }
            });

            const firstVm = firstApp.mount( '#first' );
            console.log( firstVm );
        </script>

        <div class="container border" style="margin: 15px 0" id="second">
            <input type="text" v-model="nickname">
            <p>{{nickname}}</p>
        </div>

        <script>
            const secondApp = Vue.createApp({
                data(){
                    return { nickname: '' }
                }
            });

            const secondVm = secondApp.mount( '#second' );
            console.log( secondVm );
        </script>

        <hr>

        <div class="container border" style="margin: 15px 0" id="third">
            <!-- 使用 prop 为子组件传递数据  / 监听子组件事件 -->
            <kfm-password :user-password="passwd" @passwordUpdate="update"></kfm-password>
            <p>{{passwd}}</p>
        </div>

        <script>
            const thirdApp = Vue.createApp({
                data(){
                    return { passwd: 'hello' }
                },
                methods: {
                    update(value){
                        this.passwd = value ;
                    }
                }
            });

            thirdApp.component( 'KfmPassword' , {
                props: [ 'userPassword' ],
                template: `<input type="text" :value="userPassword" @input="handler">`,
                methods: {
                    handler(e) {
                        // 触发自定义事件并传递参数
                        this.$emit( 'passwordUpdate' , e.target.value );
                    }
                }
            });

            thirdApp.mount( '#third' );
        </script>

        <div class="container border" style="margin: 15px 0" id="fourth">
            <kaifamiao-password v-model="password"></kaifamiao-password>
            <!--
            <kaifamiao-password :model-value="password" @update:model-value="fun"></kaifamiao-password>
            -->
            <p>{{password}}</p>
        </div>

        <script>
            const app = Vue.createApp({
                data(){
                    return { password: '教室里睡觉比较香' }
                }
            });

            app.component( 'KaifamiaoPassword' , {
                props: [ 'modelValue' ] ,
                template: `<input type="text" :value="modelValue" @input="$emit('update:modelValue',$event.target.value)">`
            } );

            app.mount( '#fourth' );
        </script>

    </body>
</html>